<template>
  <!-- 文本消息 -->
  <div class="chat-bubble" :class="{'self': chat.isSelf}">
    <!-- 头像 -->
    <div class="head-url" v-hammer:tap="(ev)=>onHeadClicked(ev)"  v-hammer:press="(ev)=>onHeadPressed(ev)">
      <img :src="chat.fromAccountHeadurl ? chat.fromAccountHeadurl : require('@/assets/icons/head.svg')" alt />
    </div>

    <!-- 聊天内容 -->
    <div class="content">
      <div class="user-info" v-if="!chat.isSelf">
        <div class="user-level" :class="`user-level-${chat.role}`">
          {{ chat.role | Role}}
        </div>
        <div class="username ellipsis">
          {{ chat.fromAccountNick }}
        </div>
      </div>

      <div class="bubble text" v-html="chat.content">
        
      </div>

    </div>

  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
import { Action, Mutation, Getter, namespace } from "vuex-class";
declare const $Vue: Vue;
const userModule = namespace("userModule");

@Component
export default class MessageText extends Vue {
  @userModule.State("loginInfo") loginInfo: any;

  @Prop({})
  chat: any;

  protected mounted() {
    // this.checkContent();
  }

  private checkContent() {
    let reg = /@[^@]+\s/g;
    let match = this.chat.content.match(reg);
    if (match) {
      match.forEach((item) => {
        let user = item.replace(' ', '').replace('@', '');
        if (user === this.loginInfo.identifierNick) {

        }
      });
    }
  }

  private onHeadClicked() {
    $Vue.$emit('onHeadClicked', {
      data: this.chat,
    });
  }

  private onHeadPressed() {
    $Vue.$emit('onHeadPressed', {
      data: this.chat,
    });
  }

  /**
   * 长按复制聊天内容
   */
  private onCopyContent(ev) {
    
  }
}
</script>

<style lang="stylus" scoped>

</style>

